$color:#fff;
$banxin:690rem;
$theme:#f8e24a;
* {
  padding: 0;
  
}
.playbox{
  position: relative;
  .player {
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    width: 750rem;
  height: 100vw;
    padding-top: 77rem;
    overflow: hidden;
    filter: blur(105rem);
    // background-color: pink;
  
  
  }
  
  .content{
    position: absolute;
    height: 100vh;
    top: 0;
    .contenthead{
      width: 660rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30rem;
      font-size: 30rem;

      // background-color: red;
      margin: 0 auto;
      margin-top: 100rem;
      font-weight: 900;
      span{
        font-size: 35rem;
        color: #a2a2a2;
        font-weight: 900;
      }
    }
    .musiccover{
      width: 625rem;
      height: 625rem;
      margin: 0 auto;
      background-size: cover;
      position: relative;
      margin-top: 75rem;
      border-radius: 20rem;
      overflow: hidden;
      .mask{
        width: 625rem;
      height: 625rem;
        position: absolute;
        top: 0 ;
        left: 0;
        z-index: 10;
        background-color: Rgba(0,0,0,0.5);
      }
      .control{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
         width: 625rem;
        height: 625rem;
        z-index: 11;
        top: 0;
        left: 0;
     
        
        span{
          font-size: 85rem;
          color: #fff;
        }
      }
      .tags{
        position: absolute;
        font-size: 20rem;
        color: #191a00;
        z-index: 6;
        background-color: $theme;
        bottom: 20rem;
        left: 20rem;
        padding: 20rem 30rem;
        border-radius: 60rem;
  
      }
    }
    .songsinfo{
      width: 625rem;
      margin: 0 auto;
      margin-top: 70rem;
     
      
      .infotop{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 34rem;
        .notlove{
          font-size: 50rem;
          color: #b2aead;
        }
        .lovered{
          color: #fe3132;
          font-size: 50rem;
        }
        span{
          &:first-child{
            font-size: 34rem;
            color: #fffcfa;
            font-weight: 900;
          }
         
         
        }
      }
      .inforbottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40rem;
        .bottomleft{
          display: flex;
          justify-content: space-between;
          align-items: center;
          img{
            width: 50rem;
            height: 50rem;
            border-radius: 50rem;
             
          }
          span{
            font-size: 30rem;
            color: #f5f0f2;
            font-weight: 600;

          }
          
        }
        span{
          margin-left: 10rem;
          font-size: 70rem;
          color: #b4aeae;

        }

      }
    }

    .geci{

     width: 750rem;
    //  height: 85rem;
     margin-top: 35rem;
     margin: 0 auto;
     overflow: hidden;
     
    
     ul{
       width: 625rem;
         display: flex;
         flex-direction: column;
         justify-content: start;
         align-items: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: 10rem;
        height: 150rem;
        li{
          margin-bottom: 5rem;
       
          span{
            transition: 2s;
            text-align: left;
            font-size: 22rem;
            color: #fff6fb;
            font-weight: 500;
          }
          
        }
        
    //     li:nth-child(2) span{
    //         font-size: 20rem;
    //         color: #fff;
    //     }
    //     li:nth-child(1) span{
    //       font-size: 16rem;
    //       color: #ddd;
    //   }
    //   li:nth-child(3) span{
    //     font-size: 16rem;
    //     color: #ddd;
    // }
        //  li{
             
        //    display: flex;
        //     text-align: center;
        //     justify-content: center;
        //     align-items: center;
        //      width: 355rem;
        //      height: 20rem;
        //      color: #ffff;
        //      margin-bottom: 10rem;
        //      span{
        //          text-align: center;
        //          font-size: 15rem;
        //          font-weight: 600;
        //      }
        //  }
     }
    }
    .bottomcontrol{
      width: 625rem;
      margin: 0 auto;
      margin-top: 10rem;
      .controltop{
        display: flex;
        justify-content: space-between;
        color: #837c79;
        font-size: 20rem;

      }
     .controlbottom{
       width: 625rem;
       margin-top: 20rem;
      label {
        position: relative;
    
        input {

        //  position: absolute;
        left: 0;
        top: 0;
          width: 625rem;
          opacity: 0;
          // height: 10rem;
        }
        .progress {
          background-color: #919191;
          width: 100%;
          height: 4rem;
          top: 0rem;
          left: 0;
          z-index: 10;
          // position: absolute;
          .mask {
            height: 6rem;
            width: 0%;
            background-color: #fffdfc;
            
          }
        }
      }
    
      section {
        background-color: lightblue;
        flex: 1;
        overflow: hidden;
        // padding: 15rem;
      }
     }
    
    }
  }


}



